<template>
  <div>
    <div class="linkDiv">
      <router-link v-if="showAdminUserPageFlag" :to="{ path: '/onlyAdminUserCanSee', query: { msg: '你好啊，管理员' }}">仅管理员可见页</router-link>
      <span v-if="showAdminUserPageFlag"> | </span>
      <router-link v-if="showLoginUserPageFlag" :to="{ path: '/onlyLoginUserCanSee', query: { msg: '你好啊' }}">仅登录可见页</router-link>
    </div>
    <h1>首页</h1>
    <h2>{{ showText }}</h2>
    <h3>登录用户名：{{ $store.getters.userBaseInfo.username }}</h3>
    <h3>登录角色：{{ userRole }}</h3>
    图标：
    <svg-icon icon-class="404"></svg-icon>
    <h3 class="commonColor">进网站就可以看见</h3>

    <div v-for="item in 1" :key="item" style="margin: 10px 0;">
      错误图片地址显示的图片:
      <img v-lazy="imageUrl+0" alt="错误" width="60">
    </div>
    <img v-lazy="imageUrl" alt="错误" width="60">

    <div :style="{ 'font-size':$pxToVW('30px')}">内联样式px转vw</div>

    <el-button plain @click="setTestData" >设置</el-button>

    <el-button plain @click="goToLoginPage" v-if="showLoginFlag">去登录页面</el-button>
    <el-button plain @click="logout" v-if="!showLoginFlag">退出</el-button>

  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {ACCESS_TOKEN} from "@/store/mutation-types";

export default {
  name: "HomePage",
  data() {
    return {
      imageUrl: require('@/assets/images/avatar.jpg'),
    }
  },
  computed: {
    ...mapGetters(['showText', 'permission_routes']),
    userRole () {
      return this.$store.getters.userRoles || '未登录'
    },
    showLoginFlag() {
      return !this.$ls.get(ACCESS_TOKEN)
    },
    showLoginUserPageFlag () {
      return this.permission_routes.some(item => {
        // console.log(item.path)
        return item.path === '/onlyLoginUserCanSee'
      })
    },
    showAdminUserPageFlag () {
      return this.permission_routes.some(item => {
        // console.log(item.path)
        return item.path === '/onlyAdminUserCanSee'
      })
    },
    testData(){
      return this.$ls.get('test')
    }
  },
  created() {
    console.log(this.permission_routes)
  },
  methods: {
    setTestData(){
      this.$ls.set('test','你好')
    },
    goToLoginPage() {
      this.$router.push('/login')
    },
    logout() {
      this.$store.dispatch('app/Logout').then(() => {
        this.$message({
          message: "退出成功",
          type: "success",
        });
        this.$router.push('/login')
      })
    },
  }
}
</script>

<style lang="scss" scoped>
h3 {
  color: $testColor;
}

.linkDiv {
  margin-top: 20px;

}
</style>
